<template>
  <div class="search">
    <el-card shadow="hover" class="search-view">
      <template #header>
        <h4>关键词搜索</h4>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <MoreFilled />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <div class="search-wrap">
        <div class="search-wrap-chart">
          <div class="chart-title">搜索用户数</div>
          <div class="chart-count">{{numberFormat(lineChartData.totalUser) }}</div>
          <v-chart class="line-charts" :option="getLineOption('userList','搜索用户数')" autoresize></v-chart>
        </div>
        <div class="search-wrap-chart">
          <div class="chart-title">搜索量</div>
          <div class="chart-count">{{numberFormat(lineChartData.totalCount) }}</div>
          <v-chart class="line-charts" :option="getLineOption('countList','搜索量')" autoresize></v-chart>
        </div>
      </div>
      <el-table :data="tableData">
        <el-table-column label="排名" prop="rankNo" align="center" width="60"></el-table-column>
        <el-table-column label="关键字" prop="word"></el-table-column>
        <el-table-column label="搜索数量" prop="count"></el-table-column>
        <el-table-column label="搜索用户数" prop="user"></el-table-column>
        <el-table-column label="搜索占比" prop="range"></el-table-column>
      </el-table>

      <!-- 这个简易版本的分页器 如果不写page-size,则默认是一页显示10条 -->
      <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next" :total="tableTotalData.length" />
    </el-card>
    <el-card shadow="hover" class="search-view">
      <template #header>
        <h4>分类销售排行</h4>
        <el-radio-group v-model="tabPosition" size="small">
          <el-radio-button label="品类">品类</el-radio-button>
          <el-radio-button label="商品">商品</el-radio-button>
        </el-radio-group>
      </template>
      <div class="search-pie">
        <v-chart class="pie-chart" :option="getPieOption()" autoresize></v-chart>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Search'
};
</script>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { MoreFilled } from '@element-plus/icons-vue';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportInfoStore = useReportDataStore();
const tabPosition = ref<'品类' | '商品'>('商品');

const currentPage = ref(1);
const pageSize = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
// 1. search页面左侧的表格数据
const searchWord = computed(() => reportInfoStore.reportInfo.searchWord);

// 2. 由于列表中渲染的时候，需要有5项数据，因此在serachWord的基础上进行处理一下
const tableTotalData = computed(() => {
  if (!searchWord.value) return []; // 这个判断是为了避免出错
  return searchWord.value.map((item, index) => {
    return {
      ...item, // 将原来的word count user 展开到这个对象中
      rankNo: index + 1,
      range: ((item.user / item.count) * 100).toFixed(2) + '%' // 百比分
    };
  });
});

// 3. 真正要渲染在表格中的数据项
const tableData = computed(() => {
  // 默认的时候 要显示第1页 1页有5条  0---4的索引  截取的时候是0--5
  // 当单击了2页时 要显示第2页数据 从索引为5开始截  5--10  5  6  7 8 9
  // 当单击了3页时 从10索引开始截取 10--15  10 11  12  13 14
  // 当前这个计算方式，要借助于当前页码和每页显示的数量来计算 从而不断的截取
  return tableTotalData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
});

// 4. 准备渲染左侧折线图时的数据
const lineChartData = computed(() => {
  const data = {
    wordList: [] as string[], // 关键词数组 也就是折线图中的X轴的数据来源
    userList: [] as number[], // 搜索用户数 全部收集到这个数组当中 以用来做为 Y轴的数据
    countList: [] as number[], // 搜索量 将每个城市的搜索量数据收集起来 以便做为 Y轴的数据
    totalUser: 0, // 总的搜索用户数 是将所有的搜索累加起来
    totalCount: 0 // 总的搜索量
  };
  if (tableTotalData.value && tableTotalData.value.length > 0) {
    tableTotalData.value.forEach(item => {
      data.wordList.push(item.word);
      data.userList.push(item.user);
      data.countList.push(item.count);
      data.totalUser += item.user;
      data.totalCount += item.count;
    });
  }
  return data; // 返回对应的数据
});

// 5. 准备左侧折线图要使用的数据
const getLineOption = (listName: 'userList' | 'countList', name: string) => {
  // 这个函数里面，也相当于是有两组数据 一个是搜索用户数 一个是搜索量
  return {
    xAxis: {
      data: lineChartData.value.wordList
    },
    yAxis: {
      show: false
    },
    series: {
      name,
      type: 'line',
      // data:[]
      data: lineChartData.value[listName],
      smooth: true,
      itemStyle: {
        opacity: 0
      },
      // lineStyle: {
      //   opacity:0
      // }
      areaStyle: {
        color: '#C7E7FF'
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    tooltip: {
      // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      trigger: 'axis',
      // 指示器类型。
      axisPointer: {
        type: 'shadow' //阴影效果
      }
    }
  };
};
// 6. 获取右侧饼状图的数据
const saleRank = computed(() => reportInfoStore.reportInfo.saleRank);

// 7. 准备饼状图需要用到的数据
const pieChartData = computed(() => {
  const data = {
    categoryList: [] as any,
    goodsList: [] as any,
    cTotal: 0, // 品类的总量统计
    gTotal: 0 // 商品的总量统计
  };

  // 判断一下这个数组当中是否有值， 如果没有就不要向下走了
  if (!saleRank.value) return {} as any; // 不要向下执行了

  // 先将saleRank中的数据解析出来 以便于后面方便的使用
  // const { category, goods } = saleRank.value
  // const { axisX, data1 } = category // 正常解构
  // const {axisX:axisX2,data1:data2 } = goods // 解构的时候再取一个别名

  const {
    category: { axisX, data1 },
    goods: { axisX: axisX2, data1: data2 }
  } = saleRank.value;

  // 收集总的数量
  data.cTotal = data1.reduce((prev, item) => prev + item, 0);
  data.gTotal = data2.reduce((prev, item) => item + prev, 0);

  // 准备品类中的数据
  axisX.forEach((item, index) => {
    let percent = ((data1[index]/data.cTotal)*100).toFixed(2) + '%'
    data.categoryList.push({
      name:item + ' | ' + percent,
      value:data1[index] ,
      percent,
      labelName:item
    })
  })
  // 准备商品中的数据
  axisX2.forEach((item, index) => {
    let percent = ((data2[index]/data.gTotal)*100).toFixed(2) + '%'
    data.goodsList.push({
      name:item + ' | ' + percent,
      value:data2[index] ,
      percent,
      labelName:item
    })
  })

  return data // 一定不要忘了返回这个处理后的数据 因为当前是在计算属性当中
});

// 8. 准备右侧的饼状图配置项数据
const getPieOption = () => {
  // 判断一下下面渲染的数据到底是哪个
  const list = tabPosition.value === '品类' ? pieChartData.value.categoryList : pieChartData.value.goodsList;
  // const text = tabPosition.value==='品类'
  return {
    title: [
    {
      text: tabPosition.value + '分布',
      textStyle: {
        fontSize: 14,
        fontWeight:600
      }
      },
      {
        text: '累计订单量',
        subtext: tabPosition.value === '品类' ? pieChartData.value.cTotal : pieChartData.value.gTotal,
        left: '34%',
        top: '42%',
        subtextStyle: {
          fontSize: 30,
          fontWeight:700
        },
        textAlign:'center',
    }
    ],
    tooltip: {
      trigger: 'item',
      formatter: (params:any) => {
        // console.log('tt',params)
        return `${tabPosition.value}分布<br>
          ${params.marker}名称:${params.data.labelName}<br>
          ${params.marker}数量:${params.data.value}<br>
          ${params.marker}占比:${params.data.percent}
        `
      }
    },
    legend: {
      // 图例组件。
      top: 'middle',
      left: '70%',
      orient: 'vertical',
      textStyle: {
        color: '#8c8c8c'
      }
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['32%', '50%'],
        // 中心点坐标
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          position: 'outside',
          // formatter:'{a}:{b}:{c}:{d}'
          formatter: function (params:any) {
            // console.log('pp',params)
            return params.data.labelName
          }
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          // 标签的视觉引导线配置 相当于是触须
          // show: false
          length: 7,
          length2: 5
        },
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
        data: list
      }
    ]
  };
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  .search-view {
    flex: 1;
    cursor: pointer;

    h4 {
      font-weight: 500;
    }
    &:first-child {
      margin-right: 10px;

      .search-wrap {
        display: flex;
        .search-wrap-chart {
          // display: inline-block;
          // width: 50%;
          flex: 1;
          &:first-child {
            margin-right: 4px;
          }
          &:last-child {
            margin-left: 4px;
          }
          .chart-title {
            font-size: 14px;
            color: #999;
          }
          .chart-count {
            font-size: 20px;
            margin: 4px 0;
            letter-spacing: 1px;
          }
          .line-charts {
            height: 50px;
          }
        }
      }
    }
    &:last-child {
      margin-left: 10px;
      .search-pie {
        .pie-chart {
          height: 400px;
        }
      }
    }
    :deep(.el-card__header) {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>